<template>
	<view>
		<scroll-view :scroll-top="50" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll">
			<!-- 轮播图 -->
			<case-header @onTapItem="onTapItem"></case-header>
			<!-- 几个图文 -->
			<div class="img-wrap">
				<u-image v-for="(img, imgIndex) in banner" :src="img" :key="imgIndex" mode="widthFix" class="img" @tap="toDetail(img)"></u-image>
				<view class="data-loading" v-if="loading">数据加载中...</view>
			</div>
		</scroll-view>
		
		<!-- 底部导航 -->
		<u-tabbar v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar>
	</view>


</template>

<script>
	import CaseHeader from './components/CaseHeader'
	export default {
		components: {
			CaseHeader
		},
		data() {
			return {
				loading: false,
				nav_current: 1,
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页'
					},
					// {
					// 	pagePath: "/pages/car/color",
					// 	iconPath: "edit-pen",
					// 	selectedIconPath: "edit-pen-fill",
					// 	text: '改色'
					// },
					{
						pagePath: "/pages/car/quote",
						iconPath: "rmb-circle",
						selectedIconPath: "rmb-circle-fill",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '产品'
					},
					{
						pagePath: "/pages/about/my",
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '关于我们'
					},
				], // 底部导航
				banner: ['/static/car-img/1.png','/static/car-img/2.png','/static/car-img/3.png']
			}
		},
		onLoad(option) {
		},
		onReady() {
			
		},
		methods: {
			onTapItem(item) {
				console.log(item);
			},
			toDetail(item) {
				console.log(item);
				uni.navigateTo({
  					url: '/pages/car/caseDetail'
				})
			},
			scroll(e) {
				console.log(e)
			},
			upper(e) {
				console.log(e)
			},
			lower(e) {
				console.log(e)
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.banner.push('/static/car-img/1.png');
				}, 1000)
			}
		}	
	}
</script>

<style lang="scss" scoped>
.scroll-Y {
	height: calc(100vh - 100px);
	// padding-bottom: 126rpx;
}
.img-wrap {
	margin: 15rpx;
	.img {
		margin-bottom: 15rpx;
	}
}
.data-loading {
	text-align: center;
	color: gray;
	font-size: 24rpx;
}
</style>
